﻿@model Himall.Web.Areas.Admin.Models.GiftViewModel
@{
    IEnumerable<SelectListItem> mglist = (IEnumerable<SelectListItem>)ViewBag.MemberGradeSelect;
}

<script src="~/Scripts/jquery.himallUpload.js"></script>
<script src="~/Scripts/ueditor/ueditor.config.js"></script>
<script src="~/Scripts/ueditor/ueditor.all.min.js"></script>
<script src="~/Scripts/jquery.himallLinkage.nocreate.js"></script>
<script src="~/Areas/Admin/Scripts/GiftEdit.js"></script>
<style>
    .table-input { border: 1px solid #e4e4e4; padding: 0; width: 100px; line-height: 28px; margin-right: 10px; padding-left: 10px; }
    .g-tag { display: block; float: left; width: 60px; height: 100%; }
    .g-select-box { display: block; float: right; width: 100%; position: relative; }
    .g-select-box1 { display: block; float: right; width: 500px; height: 100%; position: relative; }
    .checkbox-row { display: block; float: left; margin-right: 20px; width: 80px; height: 30px; }
    .red { color: red; }
    .mr15 { margin-right: 15px; }
    .fileBox { display: inline-block; width: 80px; height: 30px; line-height: 30px; text-align: center; overflow: hidden; position: relative; z-index: 3; cursor: pointer; }
    .fileLabel { background: blue; }
    .uploadFile { opacity: 0; filter: alpha(opacity=0); font-size: 100px; position: absolute; top: 0; right: 0; cursor: pointer; }
    .view img, .view1 img, .view2 img, .view3 img, .view4 img, .view5 img { width: 100px; height: 100px; }
    .checkbox-inline { margin-right: 35px; }
    .input-validation-error { border: 1px solid #f60; }
</style>

<iframe name="iframeUpload" src="" width="350" height="35" frameborder="0" scrolling="no" style="display:none" id="iframe"></iframe>
<form></form>

<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    var btsubmit;
    var loading;
    $(function () {
        $("#EndDate").datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii:ss',
            autoclose: true,
            weekStart: 1,
            minView: 0
        });
        $('#EndDate').datetimepicker('setStartDate', '@(DateTime.Now.ToString("yyyy-MM-dd"))');

        btsubmit = $("#btsubmit");
    });

    var isposting = false;
    function beginpost() {
        if (isposting) {
            $.dialog.tips("数据提交中...");
            return false;
        }
        isposting = true;
        btsubmit.text("提交中...");
        loading = showLoading();
    }

    function successpost(data) {
        isposting = false;
        btsubmit.text("保 存");
        loading.close();
        if (data.success == true) {
            $.dialog.tips("礼品信息操作成功", function () {
                window.location.href = "@Url.Action("Management", "Gift")";//数据提交成功页面跳转
            });
        } else {
            $.dialog.errorTips(data.msg);
        }
    }
</script>

<div class="container">
    <ul class="nav nav-tabs-custom clearfix">
        <strong>积分礼品</strong>
        <li><a href="@Url.Action("management")">管理</a></li>
        <li class="active"><a>@(Model.Id > 0 ? "编辑" : "新增")</a></li>
    </ul>


    @using (Ajax.BeginForm("Edit", "Gift", null
        , new AjaxOptions { HttpMethod = "post", OnBegin = "beginpost", OnSuccess = "successpost" }
        , new { @class = "form-horizontal", id = "gifteditform" }))
    {
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>礼品名称：</label>
            <div class="col-sm-3">
                @Html.TextBoxFor(m => m.GiftName, new { @class = "form-control input-sm" })
            </div>
            <div class="col-sm-3">
                @Html.ValidationMessageFor(m => m.GiftName, "", new { @class = "help-default cor-red" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>会员等级要求：</label>
            <div class="col-md-3">
                @Html.DropDownListFor(model => model.NeedGrade, mglist, new { @class = "form-control input-sm" })
            </div>
            <div class="col-md-3">
                @Html.ValidationMessageFor(model => model.NeedGrade, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>兑换截止时间：</label>
            <div class="col-md-3">
                @Html.TextBoxFor(model => model.EndDate, new { @class = "form-control input-sm", Value = Model.EndDate.ToString("yyyy-MM-dd HH:mm:ss") })
                @Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>所需积分：</label>
            <div class="col-sm-2">
                @Html.TextBoxFor(m => m.NeedIntegral, new { @class = "form-control input-sm" })
            </div>
            <div class="col-sm-3">
                @Html.ValidationMessageFor(m => m.NeedIntegral, "", new { @class = "help-default cor-red" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>限兑数量：</label>
            <div class="col-md-2">
                @Html.TextBoxFor(model => model.LimtQuantity, new { @class = "form-control input-sm" })
            </div>
            <div class="col-sm-1">
                <span class="help-default">0表不限</span>
            </div>
            <div class="col-sm-4">
                @Html.ValidationMessageFor(model => model.LimtQuantity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>礼品价值：</label>
            <div class="col-md-2">
                @Html.TextBoxFor(model => model.GiftValue, new { @class = "form-control input-sm" })
            </div>
            <div class="col-md-2">
                <span class="help-default">元(精确到0.01)</span>
            </div>
            <div class="col-md-3">
                @Html.ValidationMessageFor(model => model.GiftValue, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>库存：</label>
            <div class="col-md-2">
                @Html.TextBoxFor(model => model.StockQuantity, new { @class = "form-control input-sm" })
            </div>
            <div class="col-md-3">
                @Html.ValidationMessageFor(model => model.StockQuantity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label">虚拟兑换数量：</label>
            <div class="col-md-2">
                @Html.TextBoxFor(model => model.VirtualSales, new { @class = "form-control input-sm" })
            </div>
            <div class="col-md-3">
                @Html.ValidationMessageFor(model => model.VirtualSales, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label" for="">礼品图片：</label>
            <div class="col-sm-10" id="id_upload">
                <span style="display:inline-block;height:100px;width:100px;border:1px solid #ccc;float:left;line-height:100px;text-align:center;">
                    @{
        var isEdit = Model.Id > 0;
        var attr = isEdit ? "data-del=\"1\"" : "";
        var className = isEdit ? "glyphicon-remove" : "glyphicon-open";
                    }
                    <div class="fileBox glyphicon @(!string.IsNullOrWhiteSpace(Model.PicUrl1) && isEdit ? "glyphicon-remove" : "glyphicon-open")" id="fileBox1" data-del="@(!string.IsNullOrWhiteSpace(Model.PicUrl1) && isEdit ? "1" : "0")">
                        <input type="file" name="test_file1" id="test_file1" data-num="1" class="file uploadFile" style="@(!string.IsNullOrWhiteSpace(Model.PicUrl1) && isEdit ? " display:none;" : "")" accept="image/*">
                        @Html.HiddenFor(model => model.PicUrl1, new { @class = "dpicurl" })
                    </div>
                    <div class="view1" style="width:100px;height:100px;position:absolute;top:0px;z-index:0" id="up_pic1" data-url="@(Model.PicUrl1)">
                        @if (Model.Id > 0)
                        {
                            <img src="@(Model.PicUrl1)">
                        }
                    </div>
                </span>
                <span style="display:inline-block;height:100px;width:100px;border:1px solid #ccc;float:left;line-height:100px;text-align:center;margin-left:15px;">
                    <div class="fileBox glyphicon @(!string.IsNullOrWhiteSpace(Model.PicUrl2) && isEdit ? "glyphicon-remove" : "glyphicon-open")"
                         data-del="@(!string.IsNullOrWhiteSpace(Model.PicUrl2) && isEdit ? "1" : "0")"
                         id="fileBox2">
                        <input type="file" style="@(!string.IsNullOrWhiteSpace(Model.PicUrl2) && isEdit ? "display:none;" : "")" name="test_file2" id="test_file2" data-num="2" class="file uploadFile" accept="image/*">
                        @Html.HiddenFor(model => model.PicUrl2, new { @class = "dpicurl" })
                    </div>
                    <div class="view2" style="width:100px;height:100px;position:absolute;top:0px;z-index:0" id="up_pic2" data-url="@(Model.PicUrl2)">
                        @if (Model.Id > 0)
                        {
                            <img src="@(Model.PicUrl2)">
                        }
                    </div>
                </span>
                <span style="display:inline-block;height:100px;width:100px;border:1px solid #ccc;float:left;line-height:100px;text-align:center;margin-left:15px;">
                    <div class="fileBox glyphicon @(!string.IsNullOrWhiteSpace(Model.PicUrl3) && isEdit ? "glyphicon-remove" : "glyphicon-open")"
                         data-del="@(!string.IsNullOrWhiteSpace(Model.PicUrl3) && isEdit ? "1" : "0")"
                         id="fileBox3">
                        <input type="file" style="@(!string.IsNullOrWhiteSpace(Model.PicUrl3) && isEdit ? "display:none;" : "")" name="test_file3" id="test_file3" data-num="3" class="file uploadFile" accept="image/*">
                        @Html.HiddenFor(model => model.PicUrl3, new { @class = "dpicurl" })
                    </div>
                    <div class="view3" style="width:100px;height:100px;position:absolute;top:0px;z-index:0" id="up_pic3" data-url="@(Model.PicUrl3)">
                        @if (Model.Id > 0)
                        {
                            <img src="@(Model.PicUrl3)">
                        }
                    </div>
                </span>
                <span style="display:inline-block;height:100px;width:100px;border:1px solid #ccc;float:left;line-height:100px;text-align:center;margin-left:15px;" id="id_up_file4">
                    <div class="fileBox glyphicon @(!string.IsNullOrWhiteSpace(Model.PicUrl4) && isEdit ? "glyphicon-remove" : "glyphicon-open")"
                         data-del="@(!string.IsNullOrWhiteSpace(Model.PicUrl4) && isEdit ? "1" : "0")"
                         id="fileBox4">
                        <input type="file" style="@(!string.IsNullOrWhiteSpace(Model.PicUrl4) && isEdit ? "display:none;" : "")" name="test_file4" id="test_file4" data-num="4" class="file uploadFile" accept="image/*">
                        @Html.HiddenFor(model => model.PicUrl4, new { @class = "dpicurl" })
                    </div>
                    <div class="view4" style="width:100px;height:100px;position:absolute;top:0px;z-index:0" id="up_pic4" data-url="@(Model.PicUrl4)">
                        @if (Model.Id > 0)
                        {
                            <img src="@(Model.PicUrl4)">
                        }
                    </div>
                </span>
                <span style="display:inline-block;height:100px;width:100px;border:1px solid #ccc;float:left;line-height:100px;text-align:center;margin-left:15px;" id="id_up_file5">
                    <div class="fileBox glyphicon @(!string.IsNullOrWhiteSpace(Model.PicUrl5) && isEdit ? "glyphicon-remove" : "glyphicon-open")"
                         data-del="@(!string.IsNullOrWhiteSpace(Model.PicUrl5) && isEdit ? "1" : "0")"
                         id="fileBox5">
                        <input type="file" style="@(!string.IsNullOrWhiteSpace(Model.PicUrl5) && isEdit ? "display:none;" : "")" name="test_file5" id="test_file5" data-num="5" class="file uploadFile" accept="image/*">
                        @Html.HiddenFor(model => model.PicUrl5, new { @class = "dpicurl" })
                    </div>
                    <div class="view5" style="width:100px;height:100px;position:absolute;top:0px;z-index:0" id="up_pic5" data-url="@(Model.PicUrl5)">
                        @if (Model.Id > 0)
                        {
                            <img src="@(Model.PicUrl5)">
                        }
                    </div>
                </span>
                <div style="padding-top:10px; float:left; color:#999;">上传图片尽量保持为<span style="color:#e3393c">正方形</span>，默认第一张为预览图（必填）。请上传最大图，系统会自动生成各比例显示图。</div>
            </div>
        </div>

        <div class="form-group">
            <label for="" class="col-sm-2 control-label"><b>*</b>礼品描述：</label>
            <div class="col-md-8">
                @Html.TextAreaFor(m => m.Description, new { style = "width:700px;" })
                <div style="padding-top:10px;color:#999;@(string.IsNullOrWhiteSpace(Model.Description) ? "" : "display:none;")" class="cor-red" id="destips">礼品描述不能为空。</div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" id="btsubmit" class="btn btn-primary">保 存</button>
            </div>
        </div>
    }
</div>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script>
    var MaxFileSize = 1048576;//1M

    //AJAX上传文件
    function ajaxuploadfile(target, opts) {
        var imgupfile = $(target).find("input:file").eq(0); //上传控件

        if (imgupfile.val() == "") {
            $.dialog.errorTips("请选择要上传的文件！");
            return false;
        }
        else {
            if (!checkImgType(imgupfile.val())) {
                $.dialog.errorTips("上传格式为gif、jpeg、jpg、png、bmp ", '', 3);
                return false;
            }
        }

        //准备表当
        var myform = document.createElement("form");
        myform.action = opts.url;
        myform.method = "post";
        myform.enctype = "multipart/form-data";
        myform.style.display = "none";
        //将表单加当document上，
        document.body.appendChild(myform);  //重点
        var form = $(myform);

        var fu = imgupfile.clone(true).val(""); //先备份自身,用于提交成功后，再次附加到span中。
        var fu1 = imgupfile.appendTo(form); //然后将自身加到form中。此时form中已经有了file元素。

        //开始模拟提交表当。
        form.ajaxSubmit({
            success: function (data) {
                $(fu1).prependTo($(target));
                form.remove();
                if (data == "NoFile" || data == "Error" || data == "格式不正确！") {
                    $.dialog.errorTips(data);
                }
                else {
                    //回调
                    opts.success(data);
                }

            }
        });
    }

    //检查上传的图片格式
    function checkImgType(filename) {
        var pos = filename.lastIndexOf(".");
        var str = filename.substring(pos, filename.length)
        var str1 = str.toLowerCase();
        if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(str1)) {
            return false;
        }
        return true;
    }

    $(function () {
        $('.uploadFile').bind('change', function (e) {
            var _t = $(this);
            var d_parent = _t.parent();
            var string = d_parent.attr('data-del'), isHide = string >> 0;
            var curnum = _t.data("num");
            //图片大小限制
            var dom_btnFile = _t[0];
            if (typeof (dom_btnFile.files) == 'undefined') {
                try {
                    var fso = new ActiveXObject('Scripting.FileSystemObject');
                    var f = fso.GetFile($("#btnFile").val());
                    if (f.Size > MaxFileSize) {
                        $.dialog.tips('选择的图片不能大于' + MaxFileSize / 1048576 + 'M');
                        $('#from' + curnum).trigger('reset');
                        return;
                    }
                }
                catch (e) {
                    //$.dialog.tips(e);
                    //$('#from' + i).trigger('reset');
                }
            }
            else {
                if (dom_btnFile.files.length > 0 && dom_btnFile.files[0].size > MaxFileSize) {
                    $.dialog.tips('选择的图片不能大于' + MaxFileSize / 1048576 + 'M');
                    $('#from' + curnum).trigger('reset');
                    return;
                }
            }//end
            ajaxuploadfile(d_parent, {
                url: "/common/PublicOperation/UploadPic",
                success: function (data) {
                    $('#up_pic' + curnum).html('<img src="' + data + '" width="99" height="99">');
                    $("#fileBox" + curnum).removeClass('glyphicon glyphicon-open').addClass('glyphicon glyphicon-remove').attr('data-del', '1');
                    $('#up_pic' + curnum).attr('data-url', data);
                    $('#PicUrl' + curnum).val(data);
                    _t.hide();
                }
            });
        });

        $('#id_upload').bind('click', function (e) {
            var str = $(e.target).attr('data-del'),
                del = str >> 0;
            if (del) {
                var dnum = $(e.target).find('input.uploadFile').data("num");
                $(e.target).next().attr('data-url', '').html('');
                $(e.target).find('input.uploadFile').show();
                $(e.target).removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-open');
                $("#PicUrl" + dnum).val("");
                return;
            }
        });
    });
</script>